import { PlusOutlined } from '@ant-design/icons';
import { ProTable } from '@ant-design/pro-components';
import { Button } from 'antd';
import type { ActionType } from '@ant-design/pro-components';
import { useRef, useState } from 'react';
import AddModal from '@/components/Modal/AddModal';
import { AddForm, ChangeRole } from './form'
import getColumns from './columns';
import { getUserList } from '@/services/userManagement'
import { proTableFormat } from '@/utils/format'

export default () => {
    const [id, setId] = useState<string | null>(null)
    const dialogRef = useRef<any>()
    const changeRoleRef = useRef<any>()
    const actionRef = useRef<ActionType>();
    const columns = getColumns(changeRoleRef, setId);
    const onAddFinish = () => {
        dialogRef.current.hideModelRef()
        actionRef.current?.reload(true);
    }
    const onChangeFinish = () => {
        changeRoleRef.current.hideModelRef()
        actionRef.current?.reload(true);
    }
    return (
        <>
            <ProTable
                columns={columns}
                cardBordered
                actionRef={actionRef}
                request={async (params, sort) => {
                    const { pageInfo } = await getUserList({ ...params, currentPage: params.current, pageSize: params.pageSize });
                    pageInfo.list = pageInfo.list.filter(item => item.jobnumber !== 'admin');  // 管理员不出现在人员管理列表中
                    return proTableFormat(pageInfo)
                }}
                rowKey="id"
                search={{
                    labelWidth: 'auto',
                    span: 6
                }}
                options={{
                    setting: true,
                    reload: false
                }}
                pagination={{
                    pageSize: 10,
                    onChange: (page) => console.log(page),
                }}
                dateFormatter="string"
                // 表格新建栏
                toolBarRender={() => [
                    <Button
                        key="button"
                        icon={<PlusOutlined />}
                        onClick={() => {
                            setId(null)
                            dialogRef?.current?.showModelRef()
                        }}
                        type="primary"
                    >
                        新建
                    </Button>,
                ]}
            />
            <AddModal ref={dialogRef} title='新增用户'>
                <AddForm onFinish={onAddFinish} />
            </AddModal>

            <AddModal ref={changeRoleRef} title='修改角色'>
                <ChangeRole id={id} onFinish={onChangeFinish} />
            </AddModal>
        </>

    );
};